<template>
  <div>
    <template v-if="locale == 'en'">
      <RecordEn :countryList="countryList" :businessList="businessList" :result="resultObj" @page-change="onPageChange" />
    </template>
    <template v-else-if="locale == 'zh-cn'">
      <RecordZhcn :countryList="countryList" :businessList="businessList" :result="resultObj" @page-change="onPageChange" />
    </template>
  </div>
</template>

<script lang="ts" setup name="HomePage">
  import { computed, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { staticProxyListApi } from '@/api/index';
  import type { FormInstance, FormRules } from 'element-plus';
  import RecordEn from './record/en.vue';
  import RecordZhcn from './record/zh-cn.vue';

  const { locale } = useI18n();

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    data: Array;
    countryList: Array;
    businessList: Array;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
    (event: 'page-loading'): void;
  }>();

  const resultObj = reactive({
    staticProxyData: [],
    staticProxyLimit: 20,
    staticProxyPage: 1,
    staticProxyTotal: 0,
    staticProxyLoading: false,
  });

  const getStaticProxy = async (queryObj) => {
    if (resultObj.staticProxyLoading) return false;
    resultObj.staticProxyLoading = true;
    resultObj.staticProxyData = [];
    emits('page-loading', true);
    staticProxyListApi({
      ...queryObj,
      limit: resultObj.staticProxyLimit,
      page: resultObj.staticProxyPage,
    })
      .then((res) => {
        if (res.data) {
          resultObj.staticProxyData = res.data.list;
          resultObj.staticProxyTotal = res.data.count;
        }
        resultObj.staticProxyLoading = false;
        emits('page-loading', false);
      })
      .catch((err) => {
        console.log('err', err);
        resultObj.staticProxyLoading = false;
        ElMessage.error(err.message);
        emits('page-loading', false);
      });
  };

  const onPageChange = (type, val, queryObj) => {
    if (type == 'staticProxy') {
      resultObj.staticProxyPage = val;
      getStaticProxy(queryObj);
    }
  };

  defineExpose({
    onPageChange,
  });

  onMounted(() => {
    resultObj.staticProxyPage = 1;
    getStaticProxy({
      status: route.query.status != '' ? Number(route.query.status) : ''
    });
  });
</script>
<style lang="scss">
  .main {
    min-height: calc(100vh - 148px);
  }
</style>
